<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-3.2.1.min.js"></script>
    <title>list</title>
</head>
<title> - -选择日期 - -</title>
<style>
    body{
        width: 1280px;
        height: 720px;
        margin:0;
    }
    .container{
        position: relative;
        top: 50%;
        width: 100%;
        height:400px;
        margin-top: -200px;
        text-align: center;
    }
    .wall{
        width:1050px;
        height:360px;
        margin: 0 auto;
        overflow: hidden;
        border: 10px solid white;
        box-shadow:  #000000 0 0 10px ;
    }
    #picture{
        width:1050px;
        height:360px;
        background-image: url("images/picChange1.png");
    }
    .button{
        margin-top:10px ;
    }
    .rotateX,.rotateY{
        float: left;
    }
    .rotateX.act{
        animation: rotateX 1s ease 0s 1 ;
    }
    .rotateY.act{
        animation: rotateY 1s ease 0s 1 ;
    }
    @keyframes rotateX {
        from {transform: rotateX(0deg)}
        to   {transform: rotateX(90deg)}
    }
    @keyframes rotateY {
        from {transform: rotateY(0deg)}
        to   {transform: rotateY(90deg)}
    }
</style>
<body>
<div class="container">
    <div class="wall" id="blocks"></div>
    <button id="prev" class="button" onclick="prevPic()">上一张</button>
    <button id="next" class="button" onclick="nextPic()">下一张</button>
</div>
<script>
    var picIndex=1,max=5,min=1;
    var lock=false;
    var picture=document.getElementById("blocks");
    function prevPic() {
      if(lock){
        return;
      }
      lock=true;
      $(".rotateX,.rotateY").addClass("act");
      if(picIndex-1>=1){
        picIndex--;
      }else {
        picIndex=max;
      }
      document.getElementById("blocks").style.backgroundImage="url('images/picChange"+picIndex+".png')";
      setTimeout(function () {
        block();
        $(".rotateX,.rotateY").removeClass("act");
        lock=false;
      },1000);
    }
    function nextPic() {
      if(lock){
        return;
      }
      lock=true;
      $(".rotateX,.rotateY").addClass("act");
      if(picIndex+1<=5){
        picIndex++;
      }else{
        picIndex=min;
      }
      document.getElementById("blocks").style.backgroundImage="url('images/picChange"+picIndex+".png')";
      setTimeout(function () {
        block();
        $(".rotateX,.rotateY").removeClass("act");
        lock=false;
      },1000);

    }
    function block() {
      $("#blocks").empty();
      var a=21;
      var b=9;
      var x=picture.clientWidth/a;
      var y=picture.clientHeight/b;
      for(var j=0;j<b;j++){
        for(var i=0;i<a;i++){
          var div=document.createElement("div");
          div.setAttribute("class",Math.random()>0.5?"rotateX":"rotateY");
          div.style.width=x+"px";
          div.style.height=y+"px";
          div.style.backgroundImage="url('images/picChange"+picIndex+".png')";
          div.style.backgroundPosition=(-x*i)+"px "+(-y*j)+"px";
          $("#blocks").append(div);
        }
      }

    }
    window.onload=function () {
      block()
    };
</script>
</body>
</html>